<template>
  <div class="m-page">
    <m-header title="品质看板"></m-header>
    <div class="m-body">
      <m-row :gutter="20" class="first-floor">
        <m-col :span="12">
          <m-row>
            <m-col :span="8">
              <m-num-board color="#FFF8DC" title="本月收货数" :number="qualityDashboardReport.monthPIQty" />
            </m-col>
            <m-col :span="8">
              <m-num-board color="#BA55D3" title="本月来料已验数" :number="qualityDashboardReport.iqcMonthQty" />
            </m-col>
            <m-col :span="8">
              <m-percent-pond title="本月来料合格率" :percent="qualityDashboardReport.iqcMonthRate" />
            </m-col>
          </m-row>
          <m-row>
            <m-col :span="8">
              <m-num-board color="#FF7F50" title="当日收货数" :number="qualityDashboardReport.dayPIQty" />
            </m-col>
            <m-col :span="8">
              <m-num-board color="#00BFFF" title="当日来料已验数" :number="qualityDashboardReport.iqcDayQty" />
            </m-col>
            <m-col :span="8">
              <m-percent-pond title="当日来料合格率" :percent="qualityDashboardReport.iqcDayRate"
                :colors="['#01c4f9', '#c135ff']" />
            </m-col>
          </m-row>
        </m-col>
        <m-col :span="12" class="pie-col">
          <div class="q-pie-chart">
            <pie-chart title="成品检验-月合格率" :cols="finishProductQualifyMonthCols"
              :datas="finishProductQualifyMonthData"></pie-chart>
          </div>
          <div class="q-pie-chart">
            <pie-chart title="成品检验-日合格率" :cols="finishProductQualifyDayCols"
              :datas="finishProductQualifyDayData"></pie-chart>
          </div>
        </m-col>
      </m-row>

      <m-row :gutter="20" class="second-floor">
        <m-col :span="12">
          <m-box title="月/日成品总数">
            <m-row style="margin: 0">
              <m-col :span="12">
                <m-box>
                  <num-board
                    title="当<strong style='color: #7FFF00; font-family: Inter; font-weight: 700;'>月</strong>已完工数量"
                    :number="qualityDashboardReport.timelyCompletionMonthQty"></num-board>
                </m-box>
              </m-col>
              <m-col :span="12">
                <m-box>
                  <num-board title="当日已完工数量" :number="qualityDashboardReport.timelyCompletionDayQty"></num-board>
                </m-box>
              </m-col>
            </m-row>
          </m-box>
        </m-col>
        <m-col :span="12">
          <m-box title="不良数量">
            <m-row>
              <m-col :span="8">
                <m-box>
                  <num-board title="当日不良品总数" :number="defectiveReport.totalNgQty"></num-board>
                </m-box>
              </m-col>
              <m-col :span="8">
                <m-box>
                  <num-board title="当日报废总数" :number="defectiveReport.totalScrapQty"></num-board>
                </m-box>
              </m-col>
              <m-col :span="8">
                <m-box>
                  <div class="title">返工完成比例</div>
                  <div class="percent-pond">
                    <dv-percent-pond
                      :config="{ value: defectiveReport.ngRate, colors: ['rgb(255, 248, 220)', 'rgb(193, 53, 255)'] }"
                      style="width: 100%; height: 26px" />
                  </div>
                </m-box>
              </m-col>
            </m-row>
          </m-box>
        </m-col>
      </m-row>
      <m-row :gutter="20" class="third-floor">
        <m-col :span="12">
          <m-box title="来料待检清单">
            <m-scroll-board :row-num="8" :loading="lncomingMaterialsAwaitingInspectionLoading"
              :cols="lncomingMaterialsAwaitingInspectionCols" :datas="lncomingMaterialsAwaitingInspectionData" />
          </m-box>
        </m-col>
        <m-col :span="12">
          <m-box title="成品待检清单">
            <m-scroll-board :row-num="8" :loading="finishProductAwaitingInspectionLoading"
              :cols="finishProductAwaitingInspectionCols" :datas="finishProductAwaitingInspectionData" />
          </m-box>
        </m-col>
      </m-row>
    </div>
  </div>
</template>

<script setup>
// 业务组件
import pieChart from './components/pieChart/index.vue'
import numBoard from './components/numBoard/index.vue'
// 其他方法
import http from '@/utils/request'
// vue提供的api
import { ref, onBeforeMount } from 'vue'

// 成品检验-月合格率
const finishProductQualifyMonthCols = ref([
  { title: '合格数量', property: '合格数量' },
  { title: '不合格数量', property: '不合格数量' }
])
const finishProductQualifyMonthData = ref({
  合格数量: 0,
  不合格数量: 0
})

// 成品检验-日合格率
const finishProductQualifyDayCols = ref([
  { title: '合格数量', property: '合格数量' },
  { title: '不合格数量', property: '不合格数量' }
])
const finishProductQualifyDayData = ref({
  合格数量: 0,
  不合格数量: 0
})

// 来料待检清单
const lncomingMaterialsAwaitingInspectionCols = ref([
  { width: 40, title: '序号', type: 'seq', align: 'center' },
  { width: 130, title: '检验单号', property: 'BILL_NO' },
  { width: 150, title: '物料编码', property: 'MITEM_CODE' },
  { width: 150, title: '物料名称', property: 'MITEM_NAME' },
  { width: 150, title: '供应商', property: 'SUPPLIER_NAME' },
  { width: 140, title: '接收数量', property: 'RECEIVE_QTY' },
  { width: 80, title: '单位', property: 'UOM' },
  {
    width: 120,
    title: '检验状态',
    property: 'STATUS_NAME',
    formatter: ({ value }) => statusFormat(value)
  }
])

// 成品待检清单
const finishProductAwaitingInspectionCols = ref([
  { width: 40, title: '序号', type: 'seq', align: 'center' },
  { width: 130, title: '工单号', property: 'MO_CODE' },
  { width: 150, title: '产品编码', property: 'MITEM_CODE' },
  { width: 180, title: '产品名称', property: 'MITEM_NAME' },
  { width: 120, title: '数量', property: 'SAMPLE_QTY' },
  { width: 80, title: '单位', property: 'UOM' },
  {
    width: 120,
    title: '检验状态',
    property: 'STATUS_NAME',
    formatter: ({ value }) => statusFormat(value)
  }
])

// 随机生成颜色值
function statusFormat(value) {
  const r = Math.floor(Math.random() * 256)
  const g = Math.floor(Math.random() * 256)
  const b = Math.floor(Math.random() * 256)
  const status = {
    部分合格已完成: '#FF7F50',
    已确认未填写: '#FF7F50',
    不合格已完成: '#FF7F50',
    检验中: '',
    已完成: '#7FFF00',
    未检验: '#BA55D3',
    免检: '#7FFF00',
  }
  const color = status[value];
  return `<span style="color: ${color}">${value}</span>`
}
const lncomingMaterialsAwaitingInspectionData = ref([])
const finishProductAwaitingInspectionData = ref([])

const lncomingMaterialsAwaitingInspectionLoading = ref(false)
const finishProductAwaitingInspectionLoading = ref(false)

// 模拟接口请求，延迟1秒返回数据
function getData(len, cols) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = Array.from({ length: len }).map((r, i) => {
        const idx = i + 1
        const newRow = cols.reduce((res, _) => {
          if (_.type !== 'seq') {
            res[_.property] = _.title + idx
          }
          return res
        }, {})
        return newRow
      })
      resolve(res)
    }, 1000)
  })
}


// 统计
const qualityDashboardReportLoading = ref(false)
const qualityDashboardReport = ref({
  monthPIQty: 0, //本月收货数
  dayPIQty: 0, //当日收货数
  iqcMonthQty: 0, //当月已检数量
  iqcDayQty: 0, //当日来料已检数量
  iqcMonthRate: 0, //本月来料合格率
  iqcDayRate: 0, //当日来料合格率
  oqcMonthQty: 0,//当月成品合格量
  oqcMonthRate: 0, //当月成品合格率
  oqcDayQty: 0,//当日成品合格量
  oqcDayRate: 0, //当日成品合格率
  timelyCompletionMonthQty: 0, //当月完工数
  timelyCompletionDayQty: 0 //当日完工数
})
const getQualityDashboardReport = async () => {
  try {
    qualityDashboardReportLoading.value = true
    const data = await http.get('v1/kanban/getQualityDashboardReport');
    qualityDashboardReport.value = data;
    const {
      oqcMonthQty,//当月成品合格量
      oqcMonthRate, //当月成品合格率
      oqcDayQty,//当日成品合格量
      oqcDayRate, //当日成品合格率
      timelyCompletionMonthQty, //当月完工数
      timelyCompletionDayQty //当日完工数
    } = data;
    finishProductQualifyMonthData.value.合格数量 = oqcMonthQty;
    finishProductQualifyMonthData.value.不合格数量 = timelyCompletionMonthQty - oqcMonthQty;
    finishProductQualifyMonthData.value = {
      ...finishProductQualifyMonthData.value
    }
    finishProductQualifyDayData.value.合格数量 = oqcDayQty;
    finishProductQualifyDayData.value.不合格数量 = timelyCompletionDayQty - oqcDayQty;
    finishProductQualifyDayData.value = {
      ...finishProductQualifyDayData.value
    }
    qualityDashboardReportLoading.value = false;
  } catch (error) {
    console.log(error);
    qualityDashboardReportLoading.value = false;
  }
}


// 不良数量
const defectiveReportLoading = ref(false)
const defectiveReport = ref({
  totalNgQty: 0, // 不良品数量
  totalScrapQty: 0, // 报废数量
  ngRate: 0 // 返工完成比例
})
const getDefectiveReport = async () => {
  try {
    defectiveReportLoading.value = true
    const data = await http.get('v1/kanban/getDefectiveReport');
    defectiveReport.value = data;
    defectiveReportLoading.value = false;
  } catch (error) {
    console.log(error);
    defectiveReportLoading.value = false;
  }
}


// 来料待检清单
const getQualityIqcReport = async () => {
  try {
    lncomingMaterialsAwaitingInspectionLoading.value = true
    const data = await http.get('v1/kanban/getQualityIqcReport', { pageindex: 1, pagesize: 100 });
    lncomingMaterialsAwaitingInspectionData.value = data.data;
    lncomingMaterialsAwaitingInspectionLoading.value = false;
  } catch (error) {
    console.log(error);
    lncomingMaterialsAwaitingInspectionLoading.value = false;
  }
}

// 获取 成品待检清单 数据
const getQualityOqcReport = async () => {
  try {
    finishProductAwaitingInspectionLoading.value = true
    const data = await http.get('v1/kanban/getQualityOqcReport', { pageindex: 1, pagesize: 100 });
    finishProductAwaitingInspectionData.value = data.data;
    finishProductAwaitingInspectionLoading.value = false;
  } catch (error) {
    console.log(error);
    finishProductAwaitingInspectionLoading.value = false;
  }
}


function init() {
  // 获取统计
  getQualityDashboardReport();
  // 获取不良数量
  getDefectiveReport();
  // 获取 来料待检清单 数据
  getQualityIqcReport();
  // 获取 成品待检清单 数据
  getQualityOqcReport();
}

let timeId = null;
onBeforeMount(async () => {
  init();
  timeId = setInterval(() => {
    init()
  }, 1000 * 60 * 10)
})

onBeforeUnmount(async () => {
  clearInterval(timeId)
})
</script>
<style lang="less" scoped>
.m-page {
  .m-body {
    >.m-row {
      margin-bottom: 0;

      &.first-floor {
        height: 220px;

        .m-col {
          height: 100%;

          .m-row {
            height: 50%;

            ::v-deep(.m-col) {
              position: relative;

              .m-num-board,
              .m-percent-pond {
                width: 100%;

                .title {
                  padding-top: 0;
                }
              }
            }
          }

          &.pie-col {
            display: flex;

            .q-pie-chart {
              width: 50%;
              height: 100%;
            }
          }
        }
      }

      &.second-floor {
        height: 160px;

        .m-col {
          height: 100%;

          .m-box {
            .m-row {
              margin: 0 !important;

              .m-col {
                padding: 0 !important;

                .m-box {

                  // background: red;
                  ::v-deep(.m-box__body) {
                    .dv-border-box-7 {
                      background: red;

                      .border-box-content {
                        >.title {
                          color: #35a3b6;
                          font-size: 20px;
                          padding-left: 10px;
                          font-weight: 700;
                          font-family: serif;
                        }

                        .percent-pond {
                          width: 100%;
                          padding: 10px 0;
                          height: 46px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      &.third-floor {
        height: calc(100% - 220px - 160px);

        .m-col {
          height: 100%;
        }
      }
    }
  }
}
</style>
